<!--
 * @Descripttion: 
 * @version: 
 * @Author: Zuo
 * @Date: 2021-09-29 10:23:44
 * @LastEditors: Zuo
 * @LastEditTime: 2021-09-30 14:42:31
-->
<template>
  <div id="container">
    <a-card id="login">
      <a-form :model="userInfo">
        <a-form-item><h2>Vue3后台管理系统解决方案</h2></a-form-item>
        <a-form-item v-bind="validateInfos['name']">
          <a-input
            placeholder="please input your username..."
            v-model:value="userInfo.name"
          >
            <template #prefix>
              <user-outlined type="user" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item v-bind="validateInfos['pwd']">
          <a-input-password
            placeholder="please input your password..."
            v-model:value="userInfo.pwd"
            type="password"
          >
            <template #prefix>
              <lock-outlined type="lock" />
            </template>
          </a-input-password>
        </a-form-item>
          <a-form-item v-bind="validateInfos['code']">

          <a-input
            placeholder="please input your code..."
            v-model:value="userInfo.code"
          >
            <template #prefix>
              <lock-outlined type="lock" />
            </template>
            <template #addonAfter>
              <img @click="getCodeData"  :src="codeData.url"/>
            </template>
                

          </a-input>
       
        </a-form-item>
        <a-form-item>
          <a-button
            style="width: 100%"
            type="primary"
            @click="userLogin(sotre)"
            >登陆</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "@vue/runtime-core";
import { useUser } from "./scripts";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { getCode } from "../../api/module/user"
import {useStore } from 'vuex'
export default defineComponent({
  name: "login",
  components: { UserOutlined, LockOutlined },
  setup() {
    const sotre = useStore() //传给hooks
    const { userLogin, userInfo, validateInfos} = useUser();
    const codeData = reactive({
      url:'',
      codeId:'',
    })
    function getCodeData(){
        getCode().then(res=>{
          codeData.url =  "data:image/png;base64," + res.data.codeData;
          userInfo.codeId = res.data.codeId
      })
    }
    getCodeData()
    return {
      userLogin,
      userInfo,
      validateInfos,
      getCodeData,
      codeData,
      sotre
    };
  },
});
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100vh;
  background: url(../../assets/images/background.jpg);
  
  background-size: 100% 100%;
  #login {
    width: 350px;
    margin: 0 auto;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>